////
/// Components
/// PaperStack
////

@import 'utils/shared/layout';
@import 'props';

.PaperStack {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  width: paper-stack-item(width);
  height: paper-stack(height);

  @media screen and (min-width: get-breakpoint(tablet)) {
    width: paper-stack-item(width, tablet);
    height: paper-stack(height, tablet);
  }

  @media screen and (min-width: get-breakpoint('1080p', wide)) {
    width: paper-stack-item(width, desktop);
    height: paper-stack(height, desktop);
  }
}

.PaperStackItem {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
}

.PaperStackContent {
  @include flex-center;
  position: relative;
  width: 100%;
  height: paper-stack-item(height);
  color: white;
  background-color: get-color(coal, dark);
  border: get-border() solid get-color(coal, dark);
  border-top-width: get-border(thick);
  transform: paper-stack-item(transform);
  backface-visibility: hidden; // this might not be making any difference...

  @media screen and (min-width: get-breakpoint(tablet)) {
    height: paper-stack-item(height, tablet);
  }

  @media screen and (min-width: get-breakpoint('1080p', wide)) {
    height: paper-stack-item(height, desktop);
  }
}

.PaperStackHeading {
  margin-top: paper-stack-heading(margin);
  font-size: paper-stack-heading(size);
  font-weight: paper-stack-heading(weight);
  line-height: paper-stack-heading(leading);

  @media screen and (min-width: get-breakpoint(tablet)) {
    font-size: paper-stack-heading(size, tablet);
  }

  @media screen and (min-width: get-breakpoint('1080p', wide)) {
    font-size: paper-stack-heading(size, desktop);
  }
}

///
/// Layout
.PaperStackItem:nth-child(1n + 2) {
  .PaperStackContent::after {
    content: '';
    position: absolute;
    right: -(paper-stack-shadow(offset));
    bottom: paper-stack-shadow(bottom);
    left: -(paper-stack-shadow(offset));
    display: block;
    height: paper-stack-shadow(height);
    background-color: get-color(coal, dark);
    transition: transform get-duration() get-easing();

    @media screen and (min-width: get-breakpoint(tablet)) {
      bottom: paper-stack-shadow(bottom, tablet);
      height: paper-stack-shadow(height, tablet);
    }

    @media screen and (min-width: get-breakpoint('1080p', wide)) {
      bottom: paper-stack-shadow(bottom, desktop);
      height: paper-stack-shadow(height, desktop);
    }
  }
}

// stylelint-disable-next-line no-duplicate-selectors
.PaperStackItem {
  @for $i from 1 through $paper-stack-item-count {
    &:nth-child(#{$i}) {
      z-index: ($paper-stack-item-count + 1) - $i;
    }
  }

  @include paper-stack-item-offset;

  @media screen and (min-width: get-breakpoint(tablet)) {
    @include paper-stack-item-offset(tablet);
  }

  @media screen and (min-width: get-breakpoint('1080p', wide)) {
    @include paper-stack-item-offset(desktop);
  }
}

@import 'variants';
